CodePenを参考に見栄えの良いAdobe Extension UIを作成する
Photoshopエクステンション、HTML/Javascript/CSSベースだしwebGL読めるんじゃねと思って試したらいけました。
見た目をよくしたいときはcodepenなどのwebサービス開発の仕組みを参考にすると良さそうです。
/icons/hr.icon
https://gyazo.com/3838b27f8201c2cce2d7e2fdada68fc2
Adobe Extension へのwebサービスの埋め込み
/icons/hr.icon
Adobe Extensionの仕組みとCodePen
ドッキング可能なUIを作成する機能であるAdobe Extension
AdobeのDCCツールでUIを作成する分には互換性があるようであり、またPhotoShopで常駐型のUIを作成しようとすると、CC2019現在では必須な仕組みだったりする。
このExtension、HTML5とCSSでUIを構成するという関係上、見た目にこだわろうと思えば何でもできてしまう。
一方で、ウェブ上でWEBサイトを構成することができ、コードを公開できるサービスであるCodePenというサイトがある。
いろんな人がコードの腕前を披露しており、デザイン性に富んだ作品がたくさんある。
つまりはこのサイトで公開されているものはウェブを構成するためのHTMLとCSSとJavaScriptでできているのでPhotoshop上で表示することが出来てしまう。
CodePenについて
WEB上でHTML/CSS/JavaScriptのコード開発を行うことが出来るサイト。
公開作品として表示されているものはMITライセンスで公開されているものなのでルールに従えば参考にするだけでなくそのまま流用することも可能。
機能を参照して外部公開をする際には参照元を記述する。
Photoshopでの表示
/icons/hr.icon実際にPhotoshop上で表示してみる
参考作品
3Dの埋め込みをしてみたかったのでthree.jsで検索して上位に出てきたこちらのコードを参照してみる。
A PEN BY Martin Schuhfuss
ちなみにthree.jsはwebGLを簡単に表現するためのラッパー
コードへの追記
BracketsのAdobeExtension開発用プラグインで作成していく。
https://gyazo.com/9f09c46b37111ae6c2d4c4eec1f9d4df
CodePenのこの部分をHTML/CSS/JSに書き込んでいく
Extension Builderを使って作ったサンプルコードであれば
https://gyazo.com/c0047f57c88f9f99fc2af0715eb795f6
HTMLはindex.htmlの、デフォルトボタンを作成するこの辺
https://gyazo.com/e7f0ac85b24c81b0eae47c2d921c322c
自分のcssを入れ込むのはstyle.css、javascriptはmain.jsが読み込まれるのでその二つにコードを上書き
コード外の参照ライブラリ
https://gyazo.com/a9f2a59f78f0b647355c67f641af8327
また、今回参照したコードのような、外部参照のライブラリを使用しているものもある。
上の歯車マークのタブを開くと参照している外部ライブラリが見れるのでこれをHTMLが読めるように追記する。
https://gyazo.com/2ab13e4d721a9aefa696e7c9e97351a2
index.htmlのこの辺
以上でPhotoshop上で読めるようになる。
触ってドラッグするとちゃんと3Dで動く。
https://gyazo.com/3838b27f8201c2cce2d7e2fdada68fc2
その他のメモ
/icons/hr.icon
以上の手順だけだと動かないものいくつか存在した。相対パスのものとかもあるので単純に自分のWEB開発の知識で補えてないだけだとは思う。
CodePenは突飛なものから単純におしゃれでUXを考えているものから沢山あるのでツール参考資料として良好
良好なUXはアーティストのやる気アップにも繋がるのでちゃんと気にしよう。